<template>
	<view>
		<view>

			<u-sticky>
				<view class="uni-flex uni-row" style="background-color: #FFFFFF; padding: 0rpx 20rpx;">
					<view style="-webkit-flex: 1;flex: 1; ">
						<input class="uni-search" v-model="inputVal" confirm-type="search" placeholder="输入内容以进行搜索" focus=true @confirm="searchMth" />
					</view>
					<view style="width: 70rpx; margin-right: 15rpx; margin-left: 15rpx; font-size: 32rpx; padding-top: 30rpx;" @tap="cancelSearch">
						<!-- <navigator url="home" open-type="navigateBack" hover-class="other-navigator-hover"> -->
						取消
						<!-- </navigator> -->
					</view>
				</view>
			</u-sticky>

			<view>

				<view v-if="isSearch">
					<u-row style="background-color: #FFFFFF;">
						<u-col :span="7">
							<view style="font-size: 35rpx; background-color: #FFFFFF; padding-left: 20rpx; padding-top: 0rpx;">
								为你找到以下 {{myCourse.length}} 条结果
							</view>
						</u-col>
						<u-col :span="5">
							<u-dropdown :title-size="30">
								<u-dropdown-item v-model="value" :title="value" :options="options"></u-dropdown-item>
							</u-dropdown>
						</u-col>
					</u-row>

					<view v-for="(item, index) in myCourse" :key="index">
						<u-card :border="false" :foot-border-top="false" padding="10rpx" margin="0rpx" :border-radius="0" style="padding: 0rpx 20rpx;">
							<view class="" slot="body">
								<view>
									<u-row style="position: relative;" @tap="courseDetails(item.id)">
										<u-col :span="6" @tap="courseDetails(item.id)" style="padding: 20rpx 10rpx;">
											<u-image border-radius="10rpx" width="100%" height="200rpx" :src="url + 'courseImages/' + item.courseImage"></u-image>
										</u-col>
										<u-col :span="6" @tap="courseDetails(item.id)">
											<view class="textStyle">
												<view class="titleStyle">{{item.courseName}}</view>
												<view class="schoolStyle">{{item.schoolName}}</view>
												<view class="studentCountStyle">
													<u-icon color="#909399" name="account-fill" style="margin-right: 20rpx;"></u-icon>{{item.courseTeacher}}
												</view>
												<!-- <view class="courseStyle">更新到{{item.upLoad}}课时</view> -->
											</view>
										</u-col>
									</u-row>
								</view>
							</view>
						</u-card>
					</view>

					<!-- 下拉加载 -->
					<!-- <view class="item u-border-bottom" v-for="(item, index) in list" :key="index">
						{{'第' + item + '条数据'}}
					</view>
					<u-loadmore :status="status" /> -->

				</view>

				<view v-else style="padding-right: 20rpx;padding-left: 40rpx; margin-top: 20rpx;">
					<!-- <view style="font-size: 35rpx;">
						热门搜索
					</view>

					<view class="search-hot">
						<view style="color:#DD524D; font-weight: bolder;">1、</view>
					</view>

					<view class="search-hot">
						<view style="color:#DD524D; font-weight: bolder;">2、</view>
					</view>

					<view class="search-hot">
						<view style="color:#DD524D; font-weight: bolder;">3、</view>
					</view>

					<view class="search-hot">
						4、
					</view>

					<view class="search-hot">
						5、
					</view> -->
					<view style="font-size: 35rpx;">
						猜你喜欢
					</view>
					
					<view style="font-size: 28rpx; margin-top: 30rpx; color: #606266;">
						Tips:多给自己喜欢的课程评价可以让系统更懂你哦
					</view>

					<view style="margin-top: 20rpx;" v-for="(obj, index) in courseRecommendData" :key="index" @tap="courseDetails(obj.id)">
						<span style="margin-top: 60rpx; color: #007bfe; font-size: 110%;"@tap="courseDetails(obj.id)">
							{{obj.courseName}}
						</span>
					</view>
					
				</view>
			</view>

		</view>
	</view>
</template>

<script>
	import {
		// getCourseRecommandByItemUniapp,
		getCourseRecommandUniapp,
		getCourse
	} from '@/api/modules/home.js'

	export default {
		data() {
			return {
				url: this.GOBAL.baseURL,
				isSearch: false, // 是否搜索
				myCourse: [], //  课程搜索的结果

				courseRecommendData: [],

				// 加载更多
				status: 'loadmore',
				list: 15,
				page: 0,

				inputVal: '',
				value: '默认排序',
				options: [{
						label: '默认排序',
						value: '默认排序',
					},
					{
						label: '选课人数优先',
						value: '选课人数优先',
					},
					{
						label: '热门优先',
						value: '热门优先',
					}
				],
			}
		},
		onLoad() {
			let data = {
				userEmail: uni.getStorageSync("userEmail")
			}
			// getCourseRecommandByItemUniapp(data)
			getCourseRecommandUniapp(data)
				.then(resp => {
					for (let i = 0; i < 5; i++) {
						resp.data.records[i].courseImage = this.GOBAL.baseURL + 'courseImages/' + resp.data.records[i].courseImage;
						// console.log(resp.data.records[i])
						this.courseRecommendData.push(resp.data.records[i])
					}
				})
				.catch(resp => {
					console.log(resp)
				})
		},
		methods: {
			onReachBottom() {
				if (this.page >= 3) return;
				this.status = 'loading';
				this.page = ++this.page;
				setTimeout(() => {
					this.list += 10;
					if (this.page >= 3) this.status = 'nomore';
					else this.status = 'loading';
				}, 2000)
			},
			courseDetails(params) {
				// console.log(params)
				// uni.navigateTo({
				// 	url: '../course/courseDetails?courseID=' + params
				// });
								
				uni.navigateTo({
					url: '../joinCourse/joinCourse?courseID=' + params
				});

			},
			cancelSearch() {
				let that = this;

				if (that.inputVal == '') {
					uni.navigateBack({
						delta: 1
					});
				} else {
					that.inputVal = '';
				}

			},
			searchMth(event) {
				// console.log(event.target.value)

				let data = {
					courseName: event.target.value
				}

				let that = this;

				getCourse(data)
					.then((resp) => {
						that.myCourse = resp.data.records;
						that.isSearch = true;
					})
					.catch((resp) => {
						that.toast("搜索失败，请稍后再试！", 3);
					})
			},
		}
	}
</script>

<style>
	page {
		background-color: #F7F7F7;
	}
</style>

<style scoped>
	.uni-search {
		width: auto;
		height: 50rpx;
		padding: 15rpx 25rpx;
		line-height: 50rpx;
		font-size: 28rpx;
		background: #F7F7F7;
		flex: 1;
		margin-top: 20rpx;
		margin-bottom: 20rpx;
		border-radius: 6em 6em 6em 6em;
		text-align: center;
	}

	input::-ms-input-placeholder {
		text-align: center;
	}

	input::-webkit-input-placeholder {
		text-align: center;
	}

	.search-hot {
		margin-bottom: 5rpx;
		margin-top: 5rpx;
	}

	.textStyle {
		margin-left: 30rpx;
	}

	.titleStyle {
		color: #000000;
		font-size: 33rpx;
		position: absolute;
		top: 20rpx;
	}

	.schoolStyle {
		color: #909399;
		margin-top: 45rpx;
		font-size: 25rpx;
		position: absolute;
		top: 60rpx;
	}

	.studentCountStyle {
		color: #909399;
		position: absolute;
		bottom: 20rpx;
	}
</style>
